<template>
	<div class="timeMachine">
		<div class="tableBox">
			<el-form class="remantRework" ref="form" label-position="left" :model="form" label-width="50%">
				<el-form-item label="勤务时间(min)"><div><el-input v-model="form.time1" placeholder="请输入勤务时间"></el-input></div></el-form-item>
				<el-form-item label="会议时间(min)"><div><el-input v-model="form.time2" placeholder="请输入会议时间"></el-input></div></el-form-item>
				<el-form-item label="休息时间(min)"><div><el-input v-model="form.time3" placeholder="请输入休息时间"></el-input></div></el-form-item>
				<el-form-item label="清扫时间(min)"><div><el-input v-model="form.time4" placeholder="请输入清扫时间"></el-input></div></el-form-item>
				<el-form-item label="材料无的停机时间(min)"><div><el-input v-model="form.time5" placeholder="请输入停机时间"></el-input></div></el-form-item>
				<el-form-item label="等产品时间(min)"><div><el-input v-model="form.time6" placeholder="请输入等产品时间"></el-input></div></el-form-item>
				<el-form-item label="拘束时间(min)"><div><el-input v-model="form.time7" placeholder="请输入拘束时间"></el-input></div></el-form-item>
				<el-form-item label="运转可能时间(min)"><div><el-input v-model="form.time8" placeholder="请输入运转可能时间"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				time1: '',
				time2: '',
				time3: '',
				time4: '',
				time5: '',
				time6: '',
				time7: '',
				time8: '',
			},
			value:'',
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			value: '',
			clearData:[
				{
					id: '1',
					startTime: '08:00',
					endTime: '08:32',
				},
				{
					id: '2',
					startTime: '08:00',
					endTime: '08:32',
				},
				{
					id: '3',
					startTime: '08:00',
					endTime: '08:32',
				},
				{
					id: '4',
					startTime: '08:00',
					endTime: '08:32',
				}
			],
			spanArr: [],
			position: 0,
		};
	},
	mounted() {
		this.rowspan();
	},
	methods: {
		rowspan() {
				this.clearData.forEach((item,index) => {
					if( index === 0){
							this.spanArr.push(1);
							this.position = 0;
					}else{
							if(this.clearData[index].type === this.clearData[index-1].type ){
									this.spanArr[this.position] += 1;
									this.spanArr.push(0);
							}else{
									this.spanArr.push(1);
									this.position = index;
							}
					}
			})
		},
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
			 if (columnIndex === 2) {
					 const _row = this.spanArr[rowIndex];
					 const _col = _row>0 ? 1 : 0;
					 return {
							 rowspan: _row,
							 colspan: _col
					 }
			 }
			 if(columnIndex === 3){
					 const _row = this.spanArr[rowIndex];
					 const _col = _row>0 ? 1 : 0;
					 return {
							 rowspan: _row,
							 colspan: _col
					 }
			}
	  },
		onSubmit() {
			console.log('submit!');
		}
	}
};
</script>
<style lang="scss" scoped>
	.service{
		.title{
			font-weight:600;
		}
	}
</style>
<style scoped>
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 30px;
}
.timeMachine >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:5px;
}
.timeMachine >>> .el-form-item__label{
	font-size:24px;
	color:#000;
}
.timeMachine >>> .el-form-item__content{
	font-size:24px;
	color:#666666;
}
.timeMachine >>> .el-input > input{
	background:#fff;
	font-size:24px;
}
</style>
